import { observer } from "mobx-react";

import * as React from 'react';
import { observable, action, computed } from "mobx";
import { Tools } from 'weaver-mobile';
const { getLabel } = Tools;
export const RightMenu = observer(({ store, onToggleChildren, onAddChild, onDeleteChild, onDelete, onReject, data, onSetting, onBatchReject,onSynchro }) => {
    const { left, top, visible, hasChild, childVisible, isRoot } = store;
    const onSettingHandle = onSetting ? () => { onSetting(data); } : undefined;
    const onAddChildHandle = onAddChild ? () => { onAddChild(data) } : undefined;
    const onSynchroHandle = onSynchro ? () => { onSynchro(data) } : undefined;
    const show = isShow(hasChild, data, onBatchReject, onSetting, onAddChild, onDeleteChild, isRoot, onDelete, onReject, onSynchro);
    if(!show) {
        return null;
    }
    return (
        <div className="wea-right-menu wea-right-menu-show" style={{ display: visible ? 'block' : 'none', position: 'absolute', top, left }}>
            <div className="wea-right-menu-icon-background"></div>
            <ul className="ant-menu ant-menu-vertical  ant-menu-light ant-menu-root">
                {hasChild && <li className="ant-menu-item text-elli edc-tree-memu-item" onClick={onToggleChildren}>
                    <span className="wea-right-menu-icon" >
                        {childVisible ? <i className="anticon anticon-folder" style={{ marginLeft: "8px" }}></i>
                            : <i className="anticon anticon-folder-open" style={{ marginLeft: "8px" }}></i>}
                    </span>
                    <span className="">{childVisible ? getLabel('502281', '收起') : getLabel('502282', '展开')}</span>
                </li>}
                {onBatchReject && hasChild && data && data.current && data.status != 2 && data.arrival && <li className="ant-menu-item text-elli edc-tree-memu-item" onClick={onBatchReject.bind(store, data)}>
                    <span className="wea-right-menu-icon"><i className="icon-coms-Reset"></i></span>
                    <span className="">{getLabel('506005','批量退回')}</span>
                </li>}
                {onSetting && <li className="ant-menu-item text-elli edc-tree-memu-item" onClick={onSettingHandle}>
                    <span className="wea-right-menu-icon"><i className="icon-edc-common-setting"></i></span>
                    <span className="">{getLabel('502283', '设置')}</span>
                </li>}
                {onAddChild && <li className="ant-menu-item text-elli edc-tree-memu-item" onClick={onAddChildHandle}>
                    <span className="wea-right-menu-icon"><i className="icon-coms-New-Flow"></i></span>
                    <span className="">{getLabel('502284', '添加下级')}</span>
                </li>}
                {onDeleteChild && <li className="ant-menu-item text-elli edc-tree-memu-item" onClick={onDeleteChild}>
                    <span className="wea-right-menu-icon"><i className="icon-coms-delete"></i></span>
                    <span className="">{getLabel('502285', '删除下级')}</span>
                </li>}
                {!isRoot && onDelete && <li className="ant-menu-item text-elli edc-tree-memu-item" onClick={onDelete}>
                    <span className="wea-right-menu-icon"><i className="icon-coms-delete"></i></span>
                    <span className="">{getLabel('502286', '删除')}</span>
                </li>}
                {onReject && data.status == 2 && data.parent && data.parent.current && data.parent.iscurrentnode == 1
                     && data.parent.status != 2 && <li className="ant-menu-item text-elli edc-tree-memu-item" onClick={onReject.bind(store, data)}>
                    <span className="wea-right-menu-icon"><i className="icon-coms-Reset"></i></span>
                    <span className="">{getLabel('502287', '退回')}</span>
                </li>}
                {onSynchro &&  <li className="ant-menu-item text-elli edc-tree-memu-item" onClick={onSynchroHandle}>
                    <span className="wea-right-menu-icon"><i className="icon-coms-Synchro"></i></span>
                    <span className="">{getLabel('506099', '同步')}</span>
                </li>}
            </ul>
        </div>
    )

});


 function isShow (hasChild, data, onBatchReject, onSetting, onAddChild, onDeleteChild, isRoot, onDelete, onReject, onSynchro) {
    return hasChild ||
     (onBatchReject && hasChild && data && data.current && data.status != 2 && data.arrival) || 
     (onSetting) ||
     (onAddChild) ||
    onDeleteChild || 
    (!isRoot && onDelete) || 
    (onReject && data.status == 2 && data.parent && data.parent.current && data.parent.iscurrentnode == 1 && data.parent.status != 2) ||
     onSynchro;
}

export class RightMenuStore {
    @observable visible = false;
    @observable left = 0;
    @observable top = 0;
    @observable isRoot = false;
    @observable hasChild = false;
    @observable childVisible = false;
    @action show = (left, top, isRoot, hasChild, childVisible) => {
        this.visible = true;
        this.left = left;
        this.top = top;
        this.isRoot = isRoot;
        this.hasChild = hasChild;
        this.childVisible = childVisible;
    }
    @action hide = () => {
        this.visible = false;
    }
    @action position = (left, top) => {
        this.left = left;
        this.top = top;
    }
}